<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected:selectedType==='all'}" href="javascript:;" @click="checkout('all')">全部</a>
			</li>
			<li>
				<a href="javascript:;" :class="{selected:selectedType==='active'}" @click="checkout('active')">未完成</a>
			</li>
			<li>
				<a href="javascript:;" :class="{selected:selectedType==='finshed'}" @click="checkout('finshed')">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="clearDone" @click="finsh">清除已完成</button>
	</footer>
</template>

<script>
	export default {
		data(){
			return{
selectedType:'all'
			}
		},
			props:{
			arr:{
				type:Array,
				required:true
			}
		},
		computed:{
			leftCount(){
				return this.arr.filter(item=>!item.isDone).length
			},
			clearDone(){
				return this.arr.some(item=>item.isDone)
			}
		},
		methods:{
			finsh(){
				this.$emit('finsh')
			},
			checkout(val){
				this.selectedType=val
				this.$emit('changeType',val)
			}
		}
	}
</script>
